<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提出新问题 - 企业培训平台</title>

    <style>
        /* --- 核心布局修复 --- */
        /* 这个问题是由于主内容区没有为左侧固定侧边栏留出空间 */
        .main-content {
            margin-left: 240px; /* 关键：这个值必须等于您侧边栏的宽度 */
            padding: 30px;
        }

        /* --- 容器和表单美化 --- */
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 30px 40px;
        }

        .form-container h1 {
            font-size: 1.8em;
            margin: 0 0 25px 0;
            padding-bottom: 20px;
            border-bottom: 1px solid #dee2e6;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            margin-bottom: 8px;
            color: #343a40;
        }

        /* 统一输入框、文本域和下拉选择框的样式 */
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1em;
            line-height: 1.5;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box; /* 确保 padding 不会撑大宽度 */
        }

        .form-control:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
        }

        textarea.form-control {
            resize: vertical;
            min-height: 120px;
        }

        .char-counter {
            display: block;
            text-align: right;
            font-size: 0.85em;
            color: #6c757d;
            margin-top: 5px;
        }

        /* 按钮样式 */
        .btn {
            display: inline-block;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            background-color: #007bff;
            border: 1px solid #007bff;
            padding: 12px 25px;
            font-size: 1em;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
            color: #fff;
        }
        .btn:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }

    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="form-container">
        <h1>提出新问题</h1>
        <form th:action="@{/qa/ask}" th:object="${question}" method="post">

            <div class="form-group">
                <label for="title">问题标题</label>
                <input type="text" id="title" class="form-control" th:field="*{title}" required maxlength="100">
                <span id="title-counter" class="char-counter"></span>
            </div>

            <div class="form-group">
                <label for="content">问题补充 (详细描述您的问题)</label>
                <textarea id="content" class="form-control" th:field="*{content}" rows="8" maxlength="2000"></textarea>
                <span id="content-counter" class="char-counter"></span>
            </div>

            <div class="form-group">
                <label for="categoryId">问题分类 (可选)</label>
                <select id="categoryId" class="form-control" th:field="*{categoryId}">
                    <option value="">-- 请选择分类 --</option>
                    <option th:each="cat : ${categories}" th:value="${cat.id}" th:text="${cat.categoryName}"></option>
                </select>
            </div>

            <div class="form-group">
                <label for="classId">发布到班级 (可选)</label>
                <select id="classId" class="form-control" th:field="*{classId}">
                    <option value="">-- 公开发布到问答社区 --</option>
                    <option th:each="c : ${classes}" th:value="${c.id}" th:text="${c.className}"></option>
                </select>
            </div>

            <button type="submit" class="btn">发布问题</button>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 封装一个字符计数器函数
        function createCounter(inputId, counterId) {
            const inputElement = document.getElementById(inputId);
            const counterElement = document.getElementById(counterId);

            if (inputElement && counterElement) {
                const maxLength = inputElement.getAttribute('maxlength');

                const updateCounter = () => {
                    const currentLength = inputElement.value.length;
                    counterElement.textContent = `${currentLength} / ${maxLength}`;
                };

                updateCounter(); // 初始化
                inputElement.addEventListener('input', updateCounter); // 监听输入
            }
        }

        // 为标题和内容创建计数器
        createCounter('title', 'title-counter');
        createCounter('content', 'content-counter');
    });
</script>

</body>
</html>